<template>
  <div :class="['collection-card',props.legacyStyle?'card--legacy':'', selection?'selection':'']">
    <div :class="['header-warp',titleBg?'bg-blue':'bg-white']">
      <div class="title">
<!--        <template v-if="titleIcon">-->
<!--          <image v-show="prod"-->
<!--                 class="image-icon-md icon-offset&#45;&#45;md"-->
<!--                 src="@/static/icons/icon-project.png"></image>-->
<!--          <image v-show="!prod"-->
<!--                 class="image-icon-md icon-offset&#45;&#45;md"-->
<!--                 src="@/static/icons/icon-manufacturing-seq.png"></image>-->
<!--        </template>-->

        <slot name="title"></slot>
      </div>
      <div class="header-fold"
           v-if="expandable"
           @click="expand">
        <span class="text-grey-300">{{ foldButtonText }}</span>
        <span>
          <image class="image-icon-arrow arrow"
                 :class="[isCardExpand?'':'fold']"
                 src="@/static/icons/arrow-up.png">
          </image>
        </span>
      </div>
    </div>

<!--    <uni-transition :show="card.expand"-->
<!--                    :mode-class="['slide-top', 'fade']"-->
<!--                    :duration="100">-->
      <div class="card-content bg-white" v-if="card.expand">
        <slot></slot>
      </div>
<!--    </uni-transition>-->

    <div class="selector-warp">
      <div class="check">
        <slot name="checkbox"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>

import {computed, reactive, watch} from "vue";

const props = defineProps({
  selection: Boolean,
  legacyStyle:{
    type: Boolean,
    default: true
  },
  prod: {
    type: Boolean,
    default: true
  },
  titleBg: {
    type: Boolean,
    default: true
  },
  titleIcon: {
    type: Boolean,
    default: true
  },
  isExpand: {
    type: Boolean,
    default: false
  },
  expandable:{
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['cardExpand'])

const card = reactive({
  expand: false
})

const isCardExpand = computed(() => {
  return card.expand
})

const foldButtonText = computed(() => {
  return !card.expand ? "展开" : "收起"
})

watch(() => props.isExpand, (v) => {
  card.expand = v;
  emits('cardExpand',card.expand);
}, {
  immediate: true
})

const expand = function () {
  card.expand = !card.expand
  emits('cardExpand',card.expand);
}

</script>

<style lang="scss"
       scoped>
.collection-card {
  border-radius: 14rpx;
  overflow: hidden;
  margin: 22rpx 22rpx;
  position: relative;

  .selector-warp {
    display: none;
  }

  &.selection {
    .selector-warp {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #35353510;

      .check {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
  }


  &.card--legacy{
    .header-warp {
      padding: 12rpx 22rpx;

      .title{
        top: 0;
      }
    }
  }

  .header-warp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18rpx 22rpx;

    &.bg-white {
      background: rgb(255, 255, 255);
      border-bottom: 1px solid #eaeaea;
    }

    &.bg-blue {
      background: rgb(214, 236, 255);
      background: linear-gradient(90deg, rgba(214, 236, 255, 1) 0%, rgba(229, 241, 252, 1) 100%);
    }


    .title {
      position: relative;
      font-weight: 600;
      top: -6px;
      font-size: 32rpx;
    }

    .header-fold {
      font-size: 32rpx;
      cursor: pointer;

      .arrow {
        position: relative;
        bottom: 3px;
        margin-left: 8rpx;
        transition: all ease-in-out .2s;

        &.fold {
          transform: rotate(180deg);
        }
      }

    }
  }

}
</style>
